<template>
  <div class="ng-isolate-scope">
    <ul class="pagination">
      <li class="page-item ng-scope" :class="currentPage === (index+1) ? 'active' : ''" v-for="(item, index) in showPageSize" :key="index" @click.prevent="pageActiveClick(item)">
        <a class="page-link ng-binding" href="javascript:;">{{item}}</a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name:'Pagination',
  data () {
    return {
       
    };
  },
  props:{
    totalArticle:{
      type: Number,
      required: true
    },
    pageSize:{
      type: Number,
      required: true
    },
    currentPage:{
      type: Number,
      required: true
    },
  },
  computed: {
    showPageSize(){
      return Math.ceil(this.totalArticle / this.pageSize)
    }
  },
  methods: {
    pageActiveClick(i){
      this.$emit('pageActiveClick', i)
    }
  },
}

</script>
<style lang='less' scoped>
.page-link{
  width: 40px;
  margin: 0 5px 5px 0;
  border-radius: 5px;
  text-align: center;
}
</style>